<template>
    <div class="app-register data-table" style="padding-top:50px">
        <img src="http://361cdn.361sport.com/tel/images/logo.png" class="logo">
        <input type="text" placeholder="请输入昵称" id="nickname">
        <input type="text" placeholder="请输入手机号码" id="mobile">
        <div class="count clearfloat">
            <input type="text" name="jscode" placeholder="请输入右边算法结果" id="jscode">
            <span id="countCode">
                <img id="change-count" src="/Tel/Index/verify.html" alt="点击换一张">
            </span>
            <a href="javascript:;" class="change-count">
                <img src="@/assets/images/renovate.png">
            </a>
        </div>
        <div class="message clearfloat">
            <input type="tel" maxlength="6" placeholder="请输入短信验证码" id="sms_code">
            <button id="message" class="show">获取短信验证码</button>
        </div>
        <div class="password-operation">
            <input type="password" placeholder="请输入6至16位密码" id="password">
            <span class="operation"><img src="@/assets/images/show.png" alt=""></span>
        </div>
        <div class="password-operation">
            <input type="password" placeholder="请重复输入6至16位密码" id="repassword">
            <span class="operation"><img src="@/assets/images/show.png" alt=""></span>
        </div>
        <div class="statement">
            <b class="fl read"></b>
            <a href="javascript:;">我已阅读并同意《361°商城协议》</a>
        </div>
        <button class="register-btn">立即注册</button>
        <p>已有361°商城账号？
            <a href="/login">立即登录</a>
        </p>
        </div>
</template>

<script>
 
export default {
    
}
</script>

<style lang="stylus" scoped>
@import '~styles/_reset.styl'
.data-table
  width 80%
  margin 1rem auto
  text-align center
  .logo
    width .43rem
    height .26rem
    padding-bottom .25rem
  img 
    display block
    max-width 100%
    margin 0 auto
    border none
    vertical-align middle
  input 
    width 90%
    height .42rem
    padding 0 4.8%
    margin .05rem 0
    border .01rem solid #cccccc
    border-radius .04rem
    font-size .15rem
    font-family "Microsoft YaHei", "Arial"
    outline none
    font-weight normal
.data-table .count 
    padding .05rem 0
.data-table .count input 
    width 45%
    float left
    margin 0
.data-table .count span 
    float left
    width 30%
    color #1A1A1A
    height .44rem
    line-height .44rem
    text-align center
    background-color #f0f0f0
    border-radius .04rem
    font-size .15rem
    margin-left .1rem
.data-table .count .change-count 
    float right
    width 18px
    height 15px
    background-size 18px 15px
    padding 14px 1.5%
.data-table .message 
    margin .05rem 0
.data-table .message input 
    width 40%
    float left
    margin 0
.data-table .message button 
    float right
    width 46%
    height .44rem
    line-height .44rem
    text-align center
    background-color #F99302
    color #fff
    border-radius .04rem
    font-size .15rem
    font-weight 100
    cursor pointer
.password-operation 
    position: relative
.password-operation .operation 
    position absolute
    right 15px
    top 20px
    display block
    width 21px
    height 14px
    background-size 21px 14px
.statement 
    text-align left
    margin .08rem auto
.statement a 
    display inline-block
    font-size .12rem
    color #808080
.data-table .register-btn 
    float left
    width 100%
    height .44rem
    line-height .44rem
    text-align center
    font-size .15rem
    background-color #F99302
    color #fff
    margin-top .05rem
    margin-bottom .10rem
    border-radius .03rem
.data-table p 
    font-size .15rem
    color #1A1A1A
.data-table p a 
    color #F99302



</style>
